<template>
  <div>
    <el-aside width="collapse">
      <div class="app-menu">
        <el-menu
            :collapse= "isCollapse"
            :unique-opened= true
            active-text-color="skyblue"
            background-color="#2b3a4d"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            :router="true"
        >
          <div class="logo-img"><img src="../../assets/logo.png" alt=""></div>
          <div v-for="(item,index) in routerList" :key="index">
            <el-menu-item v-if="!item.children" :index="item.path">
              <el-icon><component :is="item.meta.icon"/></el-icon>
              <span class="menu_title_class">{{ item.meta.title }}</span>
            </el-menu-item>
            <el-sub-menu v-else :index="item.path">
              <template #title>
                <el-icon><location /></el-icon>
                <span class="menu_title_class">{{ item.meta.title }}</span>
              </template>
              <div v-for="i in item.children" :key="i.name">
                <el-menu-item v-if="i.meta.isShow" :index="item.path + '/' + i.path">{{ i.meta.title }}</el-menu-item>
              </div>
            </el-sub-menu>
          </div>
        </el-menu>
      </div>
    </el-aside>
  </div>
</template>
<script setup>

import {computed, onMounted, reactive, toRefs, defineProps} from 'vue'
import {useRouter} from 'vue-router'
const router = useRouter();
let routerList = reactive([])
let routers= computed(() => {
  return router.options.routes
})
const props = defineProps({
  isCollapse:Boolean
})
const { isCollapse } = toRefs(props)
onMounted(()=>{
  // console.log(router.getRoutes())
  let arr = []
  routers.value.forEach(item => {
    if (item.meta.isShow) {
      routerList.push(item)
    }
  })
})
</script>
<style scoped>
.app-menu{
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-x: hidden;
}
.logo-img{
  height: 60px;
  background-color: #333;
  overflow: hidden;
}
.logo-img img{
  width: auto;
  height: 36px;
  margin-top: 10px;
  margin-left: 14px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  height: 100vh;
}
.el-menu {
  border-right: none;
}
.el-menu--collapse {
  height: 100vh;
}
.menu_title_class{
  padding-left: 14px;
}
</style>